<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Atina - Premium Admin Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/general.css" rel="stylesheet">
    <link href="css/colors/noise-red.css" rel="stylesheet" id="theme">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <link href="css/ie8.css" rel="stylesheet">
      <script src="../../html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="js/respond/respond.min.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="ico/favicon.png">

    <script>
      //* hide all elements & show preloader
      document.documentElement.className += 'loader';
    </script>
  </head>

  <body>

    <div class="loading"><img src="img/ajaxLoader/loader01.gif" alt=""></div>

    <div class="mainContainer">

      <ul class="responsiveNav">
        <li><a href="index.html">Dashboard</a></li>
        <li><a href="forms.html">Form elements <span>+</span></a>
          <ul>
            <li><a href="forms.html"><span>+</span> Form elements</a></li>
            <li><a href="forms-wizard.html"><span>+</span> Form wizards</a></li>
            <li><a href="forms-validate.html"><span>+</span> Form validation</a></li>
            <li><a href="input-grid.html"><span>+</span> Input grid</a></li>
          </ul>
        </li>
        <li><a href="charts.html">Charts & Graphs</a></li>
        <li><a href="#">Components <span>+</span></a>
          <ul>
            <li><a href="bootstrap-components.html"><span>+</span> Bootstrap elements</a></li>
            <li><a href="grid.html"><span>+</span> Bootstrap grid</a></li>
            <li><a href="gallery.html"><span>+</span> Gallery & thumbnails</a></li>
          </ul>
        </li>
        <li><a href="icons.html">Icons</a></li>
        <li><a href="#">UI elements <span>+</span></a>
          <ul>
            <li><a href="ui-elements.html"><span>+</span> Main UI elements</a></li>
            <li><a href="buttons.html"><span>+</span> Buttons</a></li>
            <li><a href="messages.html"><span>+</span> Messages</a></li>
            <li><a href="player.html"><span>+</span> UI HTML5 Player</a></li>
          </ul>
        </li>
        <li><a href="tables.html">Tables</a></li>
        <li><a href="index.html">Error pages <span>+</span></a>
          <ul>
            <li><a href="403.html"><span>+</span> 403</a></li>
            <li><a href="404.html"><span>+</span> 404</a></li>
            <li><a href="405.html"><span>+</span> 405</a></li>
            <li><a href="500.html"><span>+</span> 500</a></li>
            <li><a href="502.html"><span>+</span> 502</a></li>
            <li><a href="offline.html"><span>+</span> Offline page</a></li>
          </ul>
        </li>
        <li><a href="index.html">Other pages <span>+</span></a>
          <ul>
            <li><a href="inbox.html"><span>+</span> Inbox</a></li>
            <li><a href="invoice.html"><span>+</span> Invoice</a></li>
            <li><a href="login.html"><span>+</span> Login page</a></li>
            <li><a href="typography.html"><span>+</span> Typograhpy</a></li>
            <li><a href="calendar.html"><span>+</span> Calendar</a></li>
            <li><a href="file-uploader.html"><span>+</span> File manager</a></li>
          </ul>
        </li>
      </ul>

      <div class="containerNav">
        <ul class="noFluidNav">
          <li><a href="index.html">Dashboard</a></li>
          <li><a href="forms.html">Form elements <span>+</span></a>
            <ul>
              <li><a href="forms.html"><span>+</span> Form elements</a></li>
              <li><a href="forms-wizard.html"><span>+</span> Form wizards</a></li>
              <li><a href="forms-validate.html"><span>+</span> Form validation</a></li>
              <li><a href="input-grid.html"><span>+</span> Input grid</a></li>
            </ul>
          </li>
          <li><a href="charts.html">Charts & Graphs</a></li>
          <li class="active"><a href="#">Components <span>+</span></a>
            <ul>
              <li class="active"><a href="bootstrap-components.html"><span>+</span> Bootstrap elements</a></li>
              <li><a href="grid.html"><span>+</span> Bootstrap grid</a></li>
              <li><a href="gallery.html"><span>+</span> Gallery & thumbnails</a></li>
            </ul>
          </li>
          <li><a href="icons.html">Icons</a></li>
          <li><a href="#">UI elements <span>+</span></a>
            <ul>
              <li><a href="ui-elements.html"><span>+</span> Main UI elements</a></li>
              <li><a href="buttons.html"><span>+</span> Buttons</a></li>
              <li><a href="messages.html"><span>+</span> Messages</a></li>
              <li><a href="player.html"><span>+</span> UI HTML5 Player</a></li>
            </ul>
          </li>
          <li><a href="tables.html">Tables</a></li>
          <li><a href="#">Error pages <span>+</span></a>
            <ul>
              <li><a href="403.html"><span>+</span> 403</a></li>
              <li><a href="404.html"><span>+</span> 404</a></li>
              <li><a href="405.html"><span>+</span> 405</a></li>
              <li><a href="500.html"><span>+</span> 500</a></li>
              <li><a href="502.html"><span>+</span> 502</a></li>
              <li><a href="offline.html"><span>+</span> Offline page</a></li>
            </ul>
          </li>
          <li><a href="index.html">Other pages <span>+</span></a>
            <ul>
              <li><a href="inbox.html"><span>+</span> Inbox</a></li>
              <li><a href="invoice.html"><span>+</span> Invoice</a></li>
              <li><a href="login.html"><span>+</span> Login page</a></li>
              <li><a href="typography.html"><span>+</span> Typograhpy</a></li>
              <li><a href="calendar.html"><span>+</span> Calendar</a></li>
              <li><a href="file-uploader.html"><span>+</span> File manager</a></li>
              <li><a href="#"><span>+</span> Open third level</a>
                <ul>
                  <li><a href="#"><span>+</span> Third level</a></li>
                  <li><a href="#"><span>+</span> Third level</a></li>
                  <li><a href="#"><span>+</span> Third level</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <header>
        <div>
          <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
          
          <ul class="headerButtons">
            <li class="respNav"><a href="#"><img src="img/icons/14x14/light/list.png" alt=""></a></a></li>
            <li class="conta"><a href="#" class="changeContainer"><span class="container"></span></a></li>
            <li><a href="#"><img src="img/icons/14x14/light/cog.png" alt=""></a></li>
            <li class="layout"><a href="#" class="layoutChange"><span class="layoutLeft"></span></a></li>
            <li><a href="#"><img src="img/icons/14x14/light/lock3.png" alt=""></a></li>
          </ul>
        </div>
      </header>

      <div class="widgetBar">
        <div class="barInner">
          <ul class="navigation">
            <li><a href="index.html"><i class="icon-white icon-th-large"></i> Dashboard</a></li>
            <li><a href="#"><i class="icon-white icon-list"></i> Form elements</a>
              <ul class="subMenu">
                <li><a href="forms.html"><span>+</span> Form elements</a></li>
                <li><a href="forms-wizard.html"><span>+</span> Form wizards</a></li>
                <li><a href="forms-validate.html"><span>+</span> Form validation</a></li>
                <li><a href="input-grid.html"><span>+</span> Input grid</a></li>
              </ul>
            </li>
            <li><a href="charts.html"><i class="icon-white icon-signal"></i> Charts & Grahps</a></li>
            <li class="active"><a href="#"><i class="icon-white icon-th"></i>  Components</a>
              <ul class="subMenu">
                <li class="active"><a href="bootstrap-components.html"><span>+</span> Bootstrap elements</a></li>
                <li><a href="grid.html"><span>+</span> Bootstrap grid</a></li>
                <li><a href="gallery.html"><span>+</span> Gallery & thumbnails</a></li>
              </ul>
            </li>
            <li><a href="icons.html"><i class="icon-white icon-leaf"></i> Icons</a></li>
            <li><a href="#"><i class="icon-white icon-heart"></i> UI elements</a>
              <ul class="subMenu">
                <li><a href="ui-elements.html"><span>+</span> Main UI elements</a></li>
                <li><a href="buttons.html"><span>+</span> Buttons</a></li>
                <li><a href="messages.html"><span>+</span> Messages</a></li>
                <li><a href="player.html"><span>+</span> UI HTML5 Player</a></li>
              </ul>
            </li>
            <li><a href="tables.html"><i class="icon-white icon-tasks"></i> Tables</a></li>
            <li><a href="#"><i class="icon-white icon-ban-circle"></i> Error pages</a>
              <ul class="subMenu">
                <li><a href="403.html"><span>+</span> Error 403</a></li>
                <li><a href="404.html"><span>+</span> Error 404</a></li>
                <li><a href="405.html"><span>+</span> Error 405</a></li>
                <li><a href="500.html"><span>+</span> Error 500</a></li>
                <li><a href="502.html"><span>+</span> Error 502</a></li>
                <li><a href="#"><span>+</span> Offline page</a></li>
              </ul>
            </li>
            <li><a href="typography.html"><i class="icon-white icon-align-justify"></i> Typograhpy</a></li>
            <li><a href="calendar.html"><i class="icon-white icon-calendar"></i> Calendar</a></li>
            <li><a href="file-uploader.html"><i class="icon-white icon-folder-close"></i> File manager</a></li>
            <li><a href="#"><i class="icon-white icon-asterisk"></i> Other pages</a>
              <ul class="subMenu">
                <li><a href="inbox.html"><span>+</span> Inbox</a></li>
                <li><a href="invoice.html"><span>+</span> Invoice</a></li>
                <li><a href="login.html"><span>+</span> Login</a></li>
              </ul>
            </li>
          </ul>
          
          <div class="widgetBarContent">
            <div class="divider"><div><span></span></div></div>
            <div align="center">
              <div class="pieChart">
                  <div class="percentage" data-percent="55"><span>55</span>%</div>
                  <span>New visits</span>
              </div>
              <div class="pieChart">
                  <div class="percentage02" data-percent="32"><span>32</span>%</div>
                  <span>New orders</span>
              </div>
            </div>
          </div>

          <div class="widgetBarContent">
            <div class="divider"><div><span></span></div></div>
            
            <div class="progressBox">
              <span class="widgetBarTitle">Diskspace usage:</span>
              <div class="green-progress spaceProgress"></div>
              <span class="value vSpace"></span>
            </div>

            <div class="progressBox">
              <span class="widgetBarTitle">File count:</span>
              <div class="red-progress fileProgress"></div>
              <span class="value fSpace"></span>
            </div>

            <div class="progressBox">
              <span class="widgetBarTitle">Bandwidth limit:</span>
              <div class="orange-progress bandwidthProgress"></div>
              <span class="value bSpace"></span>
            </div>

            <div class="divider"><div><span></span></div></div>
          </div>
          <div class="widgetBarContent">
            <span class="widgetBarTitle">Chat windows:</span>
          </div>
          <ul class="chatBar">
            <li>
              <a href="#" class="online">
                <img class="avatar" src="preview/avatar.jpg" alt="">
                <span class="name">Adam Smith</span>
              </a>
            </li>
            <li>
              <a href="#" class="offline">
                <img class="avatar" src="preview/avatar.jpg" alt="">
                <span class="name">June Marry</span>
              </a>
            </li>
            <li>
              <a href="#" class="online">
                <img class="avatar" src="preview/avatar.jpg" alt="">
                <span class="name">Joshua Josh</span>
              </a>
            </li>
            <li>
              <a href="#" class="away">
                <img class="avatar" src="preview/avatar.jpg" alt="">
                <span class="name">Mark Johan</span>
              </a>
            </li>
          </ul>
          <div class="widgetBarContent">
            <div class="divider"><div><span></span></div></div>
            <div id="date"></div>
            <div class="divider"><div><span></span></div></div>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="styleChoose">
          <a href="#" class="pullStyle"><span><img src="img/icons/14x14/cog2.png" alt=""></span></a>
          <div class="colors">
            <ul id="styling">
              <li><a href="javascript:void(0)" title="noise-black" id="noise-black"></a></li>
              <li><a href="javascript:void(0)" title="noise-red" id="noise-red"></a></li>
              <li><a href="javascript:void(0)" title="noise-green" id="noise-green"></a></li>
              <li><a href="javascript:void(0)" title="noise-orange" id="noise-orange"></a></li>
              <li><a href="javascript:void(0)" title="noise-blue" id="noise-blue"></a></li>
              <li><a href="javascript:void(0)" title="noise-purple" id="noise-purple"></a></li>
              <li><a href="javascript:void(0)" title="noise-yellow" id="noise-yellow"></a></li>
            </ul>
          </div>
          <div class="settings">
            <div class="navStyle">
              <label class="formButton"><input type="radio" name="check" id="lnav" checked="checked"> <span>Left navigation</span></label>
              <label class="formButton"><input type="radio" name="check" id="tnav"> <span>Top navigation</span></label>
            </div>
            <div class="patternchange">
              <span>Container pattern:</span>
              <ul class="containerPattern">
                <li><a href="#" id="pattern01"><img src="img/patterns/pattern01.png" alt=""></a></li>
                <li><a href="#" id="pattern02"><img src="img/patterns/pattern02.png" alt=""></a></li>
                <li><a href="#" id="pattern03"><img src="img/patterns/pattern03.png" alt=""></a></li>
                <li><a href="#" id="pattern04"><img src="img/patterns/pattern04.png" alt=""></a></li>
                <li><a href="#" id="pattern05"><img src="img/patterns/pattern05.png" alt=""></a></li>
                <li><a href="#" id="pattern06"><img src="img/patterns/pattern06.png" alt=""></a></li>
                <li><a href="#" id="pattern07"><img src="img/patterns/pattern07.png" alt=""></a></li>
                <li><a href="#" id="pattern08"><img src="img/patterns/pattern08.png" alt=""></a></li>
                <li><a href="#" id="pattern09"><img src="img/patterns/pattern09.png" alt=""></a></li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>

        <div class="topBar">
          <div class="topBarInner">
            <ul class="breadcrumbs">
              <li><a href="#"><img src="img/icons/14x14/home5.png" alt=""></a></li>
              <li><a href="#">Charts</a></li>
            </ul>

            <ul class="profile barButtons">
              <li class="profile"><a href="#"><img src="img/icons/14x14/member2.png" alt=""> Bernad Delic <span class="arrow"></span></a>
                <ul>
                  <div class="profileInfo clearfix">
                    <img src="preview/avatar.jpg" alt="">
                    <div class="info">
                      <h5>Bernad Delic</h5>
                      <a href="#">user@something.com</a>
                    </div>
                  </div>
                  <li><a href="#"><img src="img/icons/14x14/random.png" alt=""> Basic settings</a></li>
                  <li><a href="#"><img src="img/icons/14x14/lock3.png" alt=""> User settings</a></li>
                  <li><a href="#"><img src="img/icons/14x14/cog2.png" alt=""> Preferences</a></li>
                  <li><a href="#"><img src="img/icons/14x14/lock3.png" alt=""> Log out</a></li>
                </ul>
              </li>
            </ul>
            <ul class="barButtons">
              <li><a href="#"><img src="img/icons/14x14/cog.png" alt=""> Settings <span class="arrow"></span></a>
                <ul>
                  <li><a href="#"><img src="img/icons/14x14/random.png" alt=""> Basic settings</a></li>
                  <li><a href="#"><img src="img/icons/14x14/lock3.png" alt=""> User settings</a></li>
                  <li><a href="#"><img src="img/icons/14x14/cog2.png" alt=""> Preferences</a></li>
                </ul>
              </li>
              <li><a href="#"><img src="img/icons/14x14/pad.png" alt=""> New orders <strong>(5)</strong></a></li>
              <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> Monthly reports <span class="arrow"></span></a>
                <ul>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> <strong>January 2013</strong></a>
                    <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> December 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> November 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> October 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> September 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> August 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> July 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> June 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> May 2012</a>
                      <a href="#" class="ctrlButton"><img src="img/icons/14x14/download4.png" alt=""></a></li>
                  <li><a href="#"><img src="img/icons/14x14/random.png" alt=""> View all reports</a></li>
                </ul>
              </li>
              <li><a href="#"><img src="img/icons/14x14/file.png" alt=""> Invoices <span class="arrow"></span></a>
                <ul>
                  <li><a href="#"><img src="img/icons/14x14/printer2.png" alt=""> Print latest invoice</li></a>
                  <li><a href="#"><img src="img/icons/14x14/box2.png" alt=""> Invoice archive</a></li>
                  <li><a href="#"><img src="img/icons/14x14/plus.png" alt=""> Create new invoice</a></li>
                </ul>
              </li>
              <li><a href="#"><img src="img/icons/14x14/envlope1.png" alt=""> Messages <strong>(3)</strong> <span class="arrow"></span></a>
                <ul>
                  <li><a href="#"><img src="img/icons/14x14/plus.png" alt=""> New message</a></li>
                  <li><a href="#"><img src="img/icons/14x14/download4.png" alt=""> Inbox <strong>(3)</strong></a></li>
                  <li><a href="#"><img src="img/icons/14x14/upload4.png" alt=""> Outbox</a></li>
                  <li><a href="#"><img src="img/icons/14x14/trash.png" alt=""> Trash</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>

        <div class="contentInner">

          <div class="iWidgets" align="center">
            <a href="#" rel="tipsyN" title="Add something" class="iWidget"><img src="img/icons/24x24/add.png" alt=""></a>
            <a href="#" rel="tipsyN" title="Change grid" class="iWidget"><img src="img/icons/24x24/grid.png" alt=""></a>
            <a href="#" rel="tipsyN" title="Love buttons" class="iWidget"><img src="img/icons/24x24/heart.png" alt=""></a>
            <a href="#" rel="tipsyN" title="Upload something" class="iWidget"><img src="img/icons/24x24/upload.png" alt=""></a>
            <a href="#" rel="tipsyN" title="Displal stats" class="iWidget"><img src="img/icons/24x24/graph4.png" alt=""></a>
            <a href="#" rel="tipsyN" title="Love again" class="iWidget"><img src="img/icons/24x24/heart.png" alt=""></a>
          </div>

          <div class="divider"><div><span></span></div></div>

          <div class="sWidgets" align="center">
            <div class="sWidget">
              <div class="sparkContainer">
                <span>Unique visitors</span>
                <div class="sparklineBar"></div>
              </div>
              <span><a href="#">5.342 <i>unique visitors</a></i></span>
            </div>
            <div class="sWidget">
              <div class="sparkContainer">
                <span><a href="#">Monthly sales</a></span>
                <div class="sparklineBar02"></div>
              </div>
              <span>$13.345,32 <i>earned</i></span>
            </div>
            <div class="sWidget">
              <div class="sparkContainer">
                <span>Registrations</span>
                <div class="sparklineBar03"></div>
              </div>
              <span><a href="#">2.131 <i>new users</i></a></span>
            </div>
          </div>

          <div class="divider"><div><span></span></div></div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="wTitle">
                  <h5>Bootstrap modal</h5>
                </div>

                <div class="wContent">
                  <div class="wContentInner" align="center">
                    <a href="#myModal" class="myModal button sButton bSky">Lunch bootstrap modal</a>
                    <a href="#myModal2" class="myModal2 button sButton bMuddy">Modal without backdrop</a>
                    <a href="#myModal3" class="myModal3 button sButton bOlive">Modal no animation</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget lastWidget">
                <div class="wTitle">
                  <h5>Bootstrap ui range date picker</h5>
                </div>

                <div class="wContent">
                  <div class="wContentInner">
                    <input type="text" value="1/11/2012" id="rangeA" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="divider"><div><span></span></div></div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="wTitle">
                  <h5>Progress bars from bootstrap</h5>
                </div>

                <div class="wContent">
                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Simple progress bar:</span>
                      </div>
                      <div class="span9">
                        <div class="progress progress-striped">
                          <div class="bar" style="width: 10%;"></div>
                        </div>
                      </div>
                    </div>  
                  </div>

                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Striped active bar:</span>
                      </div>
                      <div class="span9">
                        <div class="progress progress-warning progress-striped active">
                          <div class="bar" style="width: 25%;"></div>
                        </div>
                      </div>
                    </div>  
                  </div>

                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Bar with value:</span>
                      </div>
                      <div class="span9">
                        <div class="progress progress-danger progress-striped active">
                          <div class="bar" style="width: 40%;"><span>40%</span></div>
                        </div>
                      </div>
                    </div>  
                  </div>

                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Load after 1 second:</span>
                      </div>
                      <div class="span9">
                        <div class="progress progress-success progress-striped">
                          <div class="bar animateBar" style="width: 0%;"><span>60%</span></div>
                        </div>
                      </div>
                    </div>  
                  </div>

                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Info bar:</span>
                      </div>
                      <div class="span9">
                        <div class="progress progress-info progress-striped">
                          <div class="bar" style="width: 90%;"><span>90%</span></div>
                        </div>
                      </div>
                    </div>  
                  </div>

                  <div class="formField">
                    <div class="row-fluid">
                      <div class="span3">
                        <span class="fLabel">Thick bar:</span>
                      </div>
                      <div class="span9">
                        <div class="progress thick progress-danger progress-striped active">
                          <div class="bar" style="width: 90%;"></div>
                        </div>
                      </div>
                    </div>  
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span6">
                <div class="widget lastWidget">
                  <div class="wTitle">
                    <h5>Progress bars on right side</h5>
                  </div>

                  <div class="wContent">
                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span3">
                          <span class="fLabel">Simple progress bar:</span>
                        </div>
                        <div class="span9">
                          <div class="progress right progress-striped">
                            <div class="bar" style="width: 10%;"></div>
                          </div>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span3">
                          <span class="fLabel">Striped active bar:</span>
                        </div>
                        <div class="span9">
                          <div class="progress right progress-warning progress-striped">
                            <div class="bar" style="width: 25%;"></div>
                          </div>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span3">
                          <span class="fLabel">Bar with value:</span>
                        </div>
                        <div class="span9">
                          <div class="progress right progress-danger progress-striped">
                            <div class="bar" style="width: 40%;"><span>40%</span></div>
                          </div>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span3">
                          <span class="fLabel">Load after 1 second:</span>
                        </div>
                        <div class="span9">
                          <div class="progress right progress-success progress-striped">
                            <div class="bar" style="width: 60%;"><span>60%</span></div>
                          </div>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span3">
                          <span class="fLabel">Info bar:</span>
                        </div>
                        <div class="span9">
                          <div class="progress right progress-info progress-striped">
                            <div class="bar" style="width: 90%;"><span>90%</span></div>
                          </div>
                        </div>
                      </div>  
                    </div>
                  </div>
                </div>
              </div>

              <div class="span6">
                <div class="widget lastWidget">
                  <div class="wTitle">
                    <h5>Progress bars on left side</h5>
                  </div>

                  <div class="wContent">
                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span9">
                          <div class="progress progress-striped">
                            <div class="bar" style="width: 10%;"></div>
                          </div>
                        </div>
                        <div class="span3">
                          <span class="fLabel right">Simple progress bar</span>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span9">
                          <div class="progress progress-warning progress-striped">
                            <div class="bar" style="width: 25%;"></div>
                          </div>
                        </div>
                        <div class="span3">
                          <span class="fLabel right">Striped active bar</span>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span9">
                          <div class="progress progress-danger progress-striped">
                            <div class="bar" style="width: 40%;"><span>40%</span></div>
                          </div>
                        </div>
                        <div class="span3">
                          <span class="fLabel right">Bar with value</span>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span9">
                          <div class="progress progress-success progress-striped">
                            <div class="bar" style="width: 60%;"><span>60%</span></div>
                          </div>
                        </div>
                        <div class="span3">
                          <span class="fLabel right">Load after 1 second</span>
                        </div>
                      </div>  
                    </div>

                    <div class="formField">
                      <div class="row-fluid">
                        <div class="span9">
                          <div class="progress progress-info progress-striped">
                            <div class="bar" style="width: 90%;"><span>90%</span></div>
                          </div>
                        </div>
                        <div class="span3">
                          <span class="fLabel right">Info bar</span>
                        </div>
                      </div>  
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>
            
            <div class="row-fluid">
              <div class="span12">
                <div class="widget lastWidget">
                  <div class="wTitle">
                    <h5>Alerts</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <div class="alert">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                      </div>

                      <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                      </div>

                      <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                      </div>

                      <div class="alert alert-error noMargin">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap buttons</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <a href="#" class="btn btn-primary">Primary button</a>
                      <a href="#" class="btn btn-info">Info button</a>
                      <a href="#" class="btn btn-success">Success button</a>
                      <a href="#" class="btn btn-warning">Warning button</a>
                      <a href="#" class="btn btn-inverse">Inverse button</a>
                      <a href="#" class="btn btn-danger">Danger button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap buttons small</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <a href="#" class="btn btn-small btn-primary">Primary button</a>
                      <a href="#" class="btn btn-small btn-info">Info button</a>
                      <a href="#" class="btn btn-small btn-success">Success button</a>
                      <a href="#" class="btn btn-small btn-warning">Warning button</a>
                      <a href="#" class="btn btn-small btn-inverse">Inverse button</a>
                      <a href="#" class="btn btn-small btn-danger">Danger button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap buttons large</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <a href="#" class="btn btn-large btn-primary">Primary button</a>
                      <a href="#" class="btn btn-large btn-info">Info button</a>
                      <a href="#" class="btn btn-large btn-success">Success button</a>
                      <a href="#" class="btn btn-large btn-warning">Warning button</a>
                      <a href="#" class="btn btn-large btn-inverse">Inverse button</a>
                      <a href="#" class="btn btn-large btn-danger">Danger button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap buttons large</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                          Action
                          <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown menu</a></li>
                          <li><a href="#">Love this buttons</a></li>
                        </ul>
                      </div>
                      <div class="btn-group">
                        <button class="btn btn-primary">Action</button>
                        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown menu</a></li>
                          <li><a href="#">Love this buttons</a></li>
                        </ul>
                      </div>
                      <div class="btn-group dropup">
                        <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#">
                          Action
                          <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown menu</a></li>
                          <li><a href="#">Love this buttons</a></li>
                        </ul>
                      </div>
                      <div class="btn-group dropup">
                        <button class="btn btn-danger">Action</button>
                        <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown menu</a></li>
                          <li><a href="#">Love this buttons</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap forms</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <form>
                        <fieldset>
                          <legend><small>This is example form</small></legend>
                          <label for="name">Label name</label>
                          <input type="text" name="name" id="name" placeholder="Type your name...">
                          <span class="help-block">Example block-level help text here.</span>
                          <label for="lastname">Label name</label>
                          <input type="text" name="lastname" id="lastname" placeholder="Type last name...">
                          <div class="formButtonBlock">
                            <label class="formButton">
                              <input type="checkbox" checked> Check me out
                            </label>
                            <div class="inline checkX">
                              <label class="formButton ">
                                <input type="checkbox" checked> Check me out
                              </label>
                            </div>
                            <div class="inline checkPlus">
                              <label class="formButton ">
                                <input type="checkbox" checked> Check me out
                              </label>
                            </div>
                          </div>
                          <a href="#" class="btn btn-danger">Submit form</a>
                        </fieldset>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap inline form</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <form class="form-inline">
                        <legend><small>This is example inline form</small></legend>
                        <input type="text" class="input-small span3" placeholder="Email">
                        <input type="password" class="input-small span3" placeholder="Password">
                        <label class="formButton">
                          <input type="checkbox" checked> Remember me
                        </label>
                        <a href="#" class="btn btn-danger">Sign in</a>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget lastWidget">
                  <div class="wTitle">
                    <h5>Bootstrap horizontal form</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <form class="form-horizontal">
                        <legend><small>This is example horizontal form</small></legend>
                        <div class="control-group">
                          <label class="control-label" for="inputEmail">Email</label>
                          <div class="controls">
                            <input type="text" id="inputEmail" placeholder="Email">
                          </div>
                        </div>
                        <div class="control-group">
                          <label class="control-label" for="inputPassword">Password</label>
                          <div class="controls">
                            <input type="password" id="inputPassword" placeholder="Password">
                          </div>
                        </div>
                        <div class="control-group noMargin">
                          <div class="controls">
                            <div class="formButtonBlock">
                              <label class="formButton">
                                <input type="checkbox" checked> Check me out
                              </label>
                            </div>
                            <a href="#" class="btn btn-danger">Sign in</a>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Atina labels</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <span class="label noShadow bAtina">Label</span>
                      <span class="label noShadow bSky">Label</span>
                      <span class="label noShadow bOlive">Label</span>
                      <span class="label noShadow bMuddy">Label</span>
                      <span class="label noShadow bAutumn">Label</span>
                      <span class="label noShadow bTrq">Label</span>
                      <span class="label noShadow bFire">Label</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Atina badges</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <span class="badge noShadow bAtina">1</span>
                      <span class="badge noShadow bSky">2</span>
                      <span class="badge noShadow bOlive">3</span>
                      <span class="badge noShadow bMuddy">4</span>
                      <span class="badge noShadow bAutumn">5</span>
                      <span class="badge noShadow bTrq">6</span>
                      <span class="badge noShadow bFire">7</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap labels</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <span class="label">Label</span>
                      <span class="label label-success">Label</span>
                      <span class="label label-warning">Label</span>
                      <span class="label label-important">Label</span>
                      <span class="label label-info">Label</span>
                      <span class="label label-inverse">Label</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap labels</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <span class="badge">1</span>
                      <span class="badge label-success">2</span>
                      <span class="badge label-warning">3</span>
                      <span class="badge label-important">4</span>
                      <span class="badge label-info">5</span>
                      <span class="badge label-inverse">6</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap popovers</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <a href="#" id="popover" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top" class="button bMuddy sButton">Popover on left</a>
                      <a href="#" id="popover" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top" class="button bSky sButton">Popover on top</a>
                      <a href="#" id="popover" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top" class="button bOlive sButton">Popover on bottom</a>
                      <a href="#" id="popover" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top" class="button bAutumn sButton">Popover on right</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Atina buttons toggles</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <button id="fat-btn" data-loading-text="Loading..." class="button bMuddy sButton">Loading button</button>
                      <button id="toggle" data-toggle="button" class="button bOlive sButton">Toggle button</button>
                      <div class="btn-group atinaGroup" data-toggle="buttons-radio">
                        <button type="button" class="button bOlive sButton">Left</button>
                        <button type="button" class="button bOlive sButton">Middle</button>
                        <button type="button" class="button bOlive sButton">Right</button>
                      </div>
                      <div class="btn-group atinaGroup" data-toggle="buttons-checkboxes">
                        <button type="button" class="button bSky sButton">Left</button>
                        <button type="button" class="button bSky sButton">Middle</button>
                        <button type="button" class="button bSky sButton">Right</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget lastWidget">
                  <div class="wTitle">
                    <h5>Bootstrap button toggles</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner" align="center">
                      <button id="fat-btn2" type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
                      <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
                      <div class="btn-group" data-toggle="buttons-checkbox">
                        <button type="button" class="btn btn-primary">Left</button>
                        <button type="button" class="btn btn-primary">Middle</button>
                        <button type="button" class="btn btn-primary">Right</button>
                      </div>
                      <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn btn-primary">Left</button>
                        <button type="button" class="btn btn-primary">Middle</button>
                        <button type="button" class="btn btn-primary">Right</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs</h5>
                  </div>

                  <div class="wContent">
                    <div class="tabbable">
                      <div class="navbar-inner">
                        <ul class="nav nav-tabs">
                          <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
                          <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
                        </ul>
                      </div>
                      
                      <div class="wContentInner">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab1">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab2">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs right side</h5>
                  </div>

                  <div class="wContent">
                    <div class="tabbable">
                      <div class="navbar-inner">
                        <ul class="nav nav-tabs pull-right" id="myTabs2">
                          <li class="active"><a data-toggle="tab" href="#tab3">Tab 1</a></li>
                          <li><a data-toggle="tab" href="#tab4">Tab 2</a></li>
                        </ul>
                      </div>

                      <div class="wContentInner">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab3">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab4">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <ul class="nav nav-tabs" id="myTabs4">
                      <li class="active"><a data-toggle="tab" href="#tab5">Tab 1</a></li>
                      <li><a data-toggle="tab" href="#tab6">Tab 2</a></li>
                    </ul>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <div class="tabbable">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab5">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab6">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <ul class="nav nav-tabs pull-right">
                      <li class="active"><a data-toggle="tab" href="#tab7">Tab 1</a></li>
                      <li><a data-toggle="tab" href="#tab8">Tab 2</a></li>
                    </ul>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <div class="tabbable">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab7">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab8">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs on left side</h5>
                  </div>

                  <div class="wContent">
                    <div class="tabbable tabs-left">
                        <ul class="nav nav-tabs">
                          <li class="active"><a data-toggle="tab" href="#tab9">Tab 1</a></li>
                          <li><a data-toggle="tab" href="#tab10">Tab 2</a></li>
                        </ul>
                      
                      <div class="wContentInner">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab9">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab10">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs on right side</h5>
                  </div>

                  <div class="wContent">
                    <div class="tabbable tabs-right">
                      <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab11">Tab 1</a></li>
                        <li><a data-toggle="tab" href="#tab12">Tab 2</a></li>
                      </ul>
                      <div class="wContentInner">
                        <div class="tab-content">
                          <div class="tab-pane active" id="tab11">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          </div>
                          <div class="tab-pane" id="tab12">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs on right side</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <div class="navbar">
                        <div class="navbar-inner">
                          <a class="brand" href="#">Title</a>
                          <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap tabs on right side</h5>
                  </div>

                  <div class="wContent">
                    <div class="wContentInner">
                      <div class="navbar">
                        <div class="navbar-inner">
                          <a class="brand" href="#">Title</a>
                          <ul class="nav pull-right">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="wContentInner">
                  <div class="navbar">
                    <div class="navbar-inner">
                      <a class="brand" href="#">Title</a>
                      <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="wTitle">
                    <h5>Bootstrap accordions</h5>
                  </div>

                  <div class="wContent">
                    <div class="accordion" id="accordion2">
                      <div class="accordion-group">
                        <div class="accordion-heading">
                          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                            Collapsible Group Item #1
                          </a>
                        </div>
                        <div id="collapseOne" class="accordion-body collapse in">
                          <div class="accordion-inner">
                            Anim pariatur cliche...
                          </div>
                        </div>
                      </div>
                      <div class="accordion-group">
                        <div class="accordion-heading">
                          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                            Collapsible Group Item #2
                          </a>
                        </div>
                        <div id="collapseTwo" class="accordion-body collapse">
                          <div class="accordion-inner">
                            Anim pariatur cliche...
                          </div>
                        </div>
                      </div>

                      <div class="accordion-group">
                        <div class="accordion-heading">
                          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                            Collapsible Group Item #2
                          </a>
                        </div>
                        <div id="collapseThree" class="accordion-body collapse">
                          <div class="accordion-inner">
                            Anim pariatur cliche...
                          </div>
                        </div>
                      </div>
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <div class="accordion" id="accordion3">
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse1">
                        Collapsible Group Item #1
                      </a>
                    </div>
                    <div id="collapse1" class="accordion-body collapse in">
                      <div class="accordion-inner">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse2">
                        Collapsible Group Item #2
                      </a>
                    </div>
                    <div id="collapse2" class="accordion-body collapse">
                      <div class="accordion-inner">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>

                  <div class="accordion-group">
                    <div class="accordion-heading">
                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3">
                        Collapsible Group Item #2
                      </a>
                    </div>
                    <div id="collapse3" class="accordion-body collapse">
                      <div class="accordion-inner">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="divider"><div><span></span></div></div>

          </div>
        </div>
        
      </div>

    </div>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="myModalLabel">Modal header</h5>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="button bSky sButton" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="button bMuddy sButton">Save changes</button>
      </div>
    </div>

    <!-- Modal -->
    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="myModalLabel">Modal header</h5>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="button bSky sButton" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="button bMuddy sButton">Save changes</button>
      </div>
    </div>

    <!-- Modal -->
    <div id="myModal3" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="myModalLabel">Modal header</h5>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="button bSky sButton" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="button bMuddy sButton">Save changes</button>
      </div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/ui/jquery-ui-1.9.2.custom.js"></script>

    <!-- flot plugin -->
    <script src="js/flot/excanvas.min.js"></script>    
    <script src="js/flot/jquery.flot.js"></script>    
    <script src="js/flot/jquery.flot.pie.min.js"></script>
    <script src="js/flot/jquery.flot.resize.js"></script>
    <script src="js/flot/jquery.flot.orderBars.js"></script>

    <!-- Jquery form wizard -->
    <script src="js/formWizard/jquery.form.js"></script>    
    <script src="js/formWizard/jquery.validate.js"></script>    
    <script src="js/formWizard/bbq.js"></script>  
    <script src="js/formWizard/jquery.form.wizard.js"></script>

    <!-- antiscroll plugin -->
    <script src="js/scrollbar/jquery.mCustomScrollbar.js"></script>

    <!-- fullcalendar plugin -->
    <script src="js/fullcalendar/fullcalendar.js"></script>

    <!-- tipsyS plugin -->
    <script src="js/tipsy/jquery.tipsy.js"></script>

    <!-- fancybox plugin -->
    <script src="js/fancybox/jquery.fancybox.pack.js"></script>

    <!-- uniform plugin -->
    <script src="js/uniform/jquery.uniform.js"></script>

    <!-- Jquery dataTable -->
    <script src="js/dataTable/jquery.dataTables.js"></script>

    <!-- uniform plugin -->
    <script src="js/sparklines/jquery.sparkline.js"></script>

    <!-- chosen plugin -->
    <script src="js/chosen/chosen.jquery.js"></script>

    <!-- cookie plugin -->
    <script src="js/cookie/jquery.cookie.js"></script>

    <!-- jplayer plugin -->
    <script src="js/jplayer/jquery.jplayer.min.js"></script>

    <!-- mask plugin -->
    <script src="js/mask/jquery.maskedinput-1.3.js"></script>

    <!-- easypiechart plugin -->
    <script src="js/easypiechart/jquery.easy-pie-chart.js"></script>

    <!-- globalize plugin -->
    <script src="js/globalize/globalize.js"></script>
    <script src="js/globalize/cultures/globalize.culture.de.js"></script>

    <!-- jplayer plugin -->
    <script src="js/jplayer/jquery.jplayer.min.js"></script>
    <script src="js/jplayer/jplayer.playlist.min.js"></script>

    <!-- ibutton plugin -->
    <script src="js/ibutton/jquery.ibutton.js"></script>

    <!-- daterangepicker plugin -->
    <script src="js/dateRangepicker/date.js"></script>
    <script src="js/dateRangepicker/daterangepicker.jQuery.js"></script>

    <!-- antiscroll plugin -->
    <script src="js/antiscroll/jquery-mousewheel.js"></script>    
    <script src="js/antiscroll/antiscroll.js"></script>    

    <script src="js/bootstrap.min.js"></script>  
    <script src="js/application.js"></script>       

    <script src="js/general.js"></script>
    <script src="js/forms.js"></script>

    <script>
      $(document).ready(function() {
        setTimeout('$("html").removeClass("loader")',1000);

        $('#rangeA').daterangepicker();
      });
    </script>

  </body>
</html>
